<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="keyword" content="犀牛故事">
    <meta name="description" content="这是个故事app">
    <meta name="author" content="">
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="../components/materialize/dist/css/materialize.css"  media="screen,projection"/>
    <link rel="stylesheet" href="../components/materialize/dist/css/reset.css">
    <link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../css/login.css">
</head>
<body>
<header class="header">
   <a class="button">×</a>
</header>
<div class="LogMain">
    <h3 class="logH3">犀牛故事</h3>
</div>
<div class="container" ng-controller="users.ctrl">
    <form class="form" ng-submit="doLogin()">
        <input type="email" class="email" ng-model="user.email"/>
        <input type="password" class="password"  ng-model="user.password"/>
        <input type="checkbox" placeholder=""/><span class="rember">记住我</span><span class="right forget">忘记密码？</span>
        <div class="logDiv">
            <button class="login" type="submit">登录</button>
            <button class="login">注册</button>
        </div>
    </form>
    <div class="otherLog">

        <a href=""><i class="fa fa-weibo"></i>微博登录</a>
        <a href=""><i class="fa fa-qq"></i>QQ登录</a>
        <a href=""><i class="fa fa-weixin"></i>微信登录</a>
    </div>
</div>
<script src="../components/angular/angular.js"></script>
<script src="../components/jquery/dist/jquery.js"></script>
<script src="../components/materialize/dist/js/materialize.js"></script>

<script>

    function FJin(){}
    FJin.prototype= {
        id: function (id) {
            return document.getElementById(id);
        },
        tag: function (tag) {
            return document.getElementsByClassName(tag)[0];
        },
        ema:function (obj,emailValue){
        if(/^[\w\-\.]+\@[\w]+\.[\w]{2,4}/.test(emailValue)){
            obj.style = "color:green;";
        }else{
            obj.style = "color:red;";
             }
        },
        mima:function(objValue){
            if(objValue.length<8){
                Materialize.toast('密码强度不够', 4000)
            }
        }
    };
    var $= new FJin();
    $.tag('email').onfocus=function(){
        this.style = "color:gray;";
    };
    $.tag('email').onblur=function(){
        $.ema(this,this.value)
    };
    $.tag('password').onblur=function(){
        $.mima(this.value)
    }


</script>
<script>
    var logo=angular.module('app',[]);
    logo.controller('users.ctrl', ['$scope', '$http', '$rootScope',function ($scope, $http,$rootScope) {
        $scope.doLogin = function () {
            console.log($scope.user);
            $http.post('/users/login', $scope.user)
                    .then(function (res) {
                        console.log(res.data.data);
                        if(res.data.status){
                            self.location.href="index.html"
                        }
                    })
        }
    }])
</script>
</body>
</html>